<template>
  <div>

    <div v-if="courseList.length === 0" class="emptyPage">
      <img src="/web-hft-ee/static/img/m/null_message.png">
      <p>还没有课程哦</p>
    </div>
    <div v-else class="list">
      <div class="item" :key="idx" v-for="(item,idx) in courseList" @click="onItemClick(item)">
        <div class="left">
          <!--suppress HtmlUnknownTarget -->
          <img :src="item.subjectInfo.pic"/>
          <p class="flag" :class="{passed :item.isPassed}">{{item.learningStatus}}</p>
        </div>
        <div class="right">
          <p class="ellipsis2">{{item.subjectInfo.title}}</p>
          <p class="notExpired" :class="{expired :item.expire}">{{item.expireDateStr}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import MyCourseMixin from './MyCourseMixin'

  export default {
    mixins:[MyCourseMixin],
  }
</script>

<style scoped>
  .list {
    display: flex;
    flex-direction: column;
  }

  .list > .item {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 16px;
  }

  .list > .item > .left {
    width: 140px;
    height: 78px;
    position: relative;
    margin-right: 12px;
  }

  .list > .item > .left > img {
    border-radius: 4px;
    width: 140px;
    height: 78px;
    object-fit: cover;
  }

  .list > .item > .left > p {
    position: absolute;
    border-radius: 4px;
    width: 48px;
    left: 0;
    top: 0;
    background-color: #CDECFF;
    font-size: 12px;
    color: #1DA1F2;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /*noinspection CssUnusedSymbol*/
  .list > .item > .left > .passed {
    background-color: #009944;
    color: white;
  }

  .list > .item > .right p:nth-of-type(1) {
    font-size: 16px;
    color: #333333;
    padding-bottom: 8px;
  }

  .list > .item > .right p:nth-of-type(2) {
    font-size: 12px;
  }

  .list > .item > .right > .notExpired {
    color: #999999;
  }

  /*noinspection CssUnusedSymbol*/
  .list > .item > .right > .expired {
    color: #FF3328;
  }

</style>
